import React, { useEffect, useState } from 'react'
import styles from '../index.module.scss'
import { Button, Card, Carousel, Checkbox, Empty, Image, Input } from 'antd'
import UsePaginatedHook from '@/components/ComponentHook/UsePaginatedHook'
import { getManagePublicApi, updateManagePublicApi } from '@/common/api'
import { getTimer } from '@/common/common'
export default function ManagePublic({ state }) {
  const { list, setList, endRef } = UsePaginatedHook(getManagePublicApi, 20, { state })
  const [loading,setLoading] = useState(false)
  //驳回
  const callBackPublic = async (id,operateState,userState) => {
    setLoading(true)
    const RES = await updateManagePublicApi({ publicId: id,state:operateState ,userState})
    if (RES.code === 200) {
      setList(pre => pre.filter(item => item.publicId !== id))
    }
    setLoading(false)
  }
  if (list.length === 0) {
    return <div className={styles.empty}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据"/></div>
  }
  return (
    <>
      <div>
        <div className={styles.managePublics}>
          <ul>
            {list.map((item,index) => {
              return (
                <li ref={list.length===index+1?endRef:null} key={item.publicId}>
                  <div className='left'>
                    <Carousel arrows>
                      {item.imgList.map((src, index) => {
                        return <div key={index} className='imgCard'>
                          <Image style={{ objectFit: 'cover' }} src={`http://localhost:5000/${src}`} />
                        </div>
                      })}
                    </Carousel>
                  </div>
                  <div className='center'>
                    <div className='content'>
                      <div className='item'>
                        <div className='name'>发布日期：</div>
                        <div className='text'>{getTimer(item?.time)}</div>
                      </div>
                      <div className='item'>
                        <div className='name'>作者：</div>
                        <div className='text'>{ item.name}</div>
                      </div>
                      <div className='item'>
                        <div className='name'>标题：</div>
                        <div className='text'>{ item.title}</div>
                      </div>
                      <div className='item'>
                        <div className='name'>内容：</div>
                        <div className='text'>{ item.text}</div>
                      </div>
                    </div>

                  </div>
                  <div className='right'>
                    {(state==="1"||state==='3')&&<Button loading={loading} onClick={()=>callBackPublic(item.publicId,"2",state)}>驳回</Button>}
                    {(state==="1"||state==="2")&&<Button loading={loading} onClick={()=>callBackPublic(item.publicId,"3",state)}>通过</Button>}
                  </div>
                </li>
              )
            })}
          </ul>
        </div>
      </div>
    </>

  )
}
